<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Pending Events</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://localhost:8000/static/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
	<!--  Author : Fouad Hesham Said This function is for validating that the user chose at least one event to approve or reject -->
	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>		
		<script type="text/javascript">

		var counter = 0
		function checkSelected(id) 
			{
				counter=1;
				$('#approve').hide();

			}

		function check() 
			{
				if(counter == 0) 
				{
					$('#reject').show();
					$('#approve').hide();
						return false;
					}
					else
					{
						var r = confirm ("Are you sure you want to reject the event ?")
						if (r == false)
						{
							return false;
						}
						else 
						{
							document.input.action = '/reject/';
							counter = 0;
							return true;
						}
					}	
			}

			function checkApproved(){
				if(counter == 0) 
				{
						$('#approve').show();
						$('#reject').hide();

						return false;
					}
					else{
					$('#approveConfirmation').show();
					 return true;
					}

				}
		</script>
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
   <ul class="nav">
          <a class="brand" href="/homePage/">Eventati</a>
          <li><a href ="/DashboardHome/">Home Page</a></li>      
          <li > <a href="/AboutUs/">About Us</a></li>
          <li><a href="/ViewInstructions/">Instructions</a></li>
          <li><a href  ="/Terms&Conditions/">  Terms & Conditions</a></li>
         <li><a href  ="/News/">  Latest News and Updates</a></li>
         <li><a href ="/Faqs/"> FAQS</a></li>
         <li><a href ="/Contactus/"> Contactus</a></li>
		<!-- Author: Amina Kadry This form is for logging the user out of his account -->

         <li><a href="/logout/" method="POST">Log out</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
	    <h1>Pending</h1>
	    {% if flagPendingEvents %}
      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <!--  Author : Fouad Hesham Said This function is for the system moderator to approve or reject the events he wants-->
		      <div class="hero-unit">
		      <input type='hidden' id='current_page' />
		      <input type='hidden' id='show_per_page' />
		      <div id='content'>  
					<form name="input" id="input" action = "/approve/" method = "POST">
				    <TABLE id="dataTable" width="350px" border="1">
				        <tr>
							<th> Edit</th>			
							<th> Event Name</th>

					</tr>
				{% for e in allEvents %}
				
						<tr>
							<TD> <INPUT type = "checkbox" name="pending" value="{{ e.id }}" onclick = "checkSelected('{{ e.id }}')" ></TD>
							<TD> <a href="/EventPage/{{e.id}}"><li>{{e.template.eventName}}</li></a></TD>


						<tr/>
						
					{% endfor %}
				    </TABLE>


			

			<div id="reject" style="display:none;"> <font face="Comic Sans MS" color="red"> You haven't checked any event to reject </font></div>
		 	   <div id="approve" style="display:none;"> <font face="Comic Sans MS" color="red"> You haven't checked any event to approve </font></div> 
		<br>
		<br>

				<INPUT type="submit" value="Approve" onclick = "return checkApproved();"/>
				<INPUT type="submit" value="Reject" onclick = "return check();" />
{% else %}
				<h2><font color="red"><p>There are no pending events</p></font></h2>
				{% endif %}
				</form>
				</div>  
				<div id='page_navigation'></div> 
		      </div>


		      </div>

		
        
      </div>

    

      <hr>

      <footer>
      <p class="pull-center">
		 <a href="/AboutUs/">About Us</a>
				<a href="/ViewInstructions/">Instructions</a>
				<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
				<a href  ="/News/">  Latest News and Updates</a>
				<a href ="/Faqs/"> FAQS</a>
				<a href ="/Contactus/"> Contactus</a>
				<p class="pull-right"><a href="#">Back to top</a></p>

				        <p>&copy; Company 2012</p>      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>
